<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>股票监控系统</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/custom.css">
    <script src="./js/echarts.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
    <h2 class="mb-4">test系统</h2>

    <!-- 导航栏 -->
    <ul class="nav nav-tabs mb-4" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="search-tab" data-bs-toggle="tab" data-bs-target="#search" type="button"
                    role="tab">股票查询
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="group-tab" data-bs-toggle="tab" data-bs-target="#group" type="button"
                    role="tab">分组管理
            </button>
        </li>
    </ul>

    <!-- 内容区域 -->
    <div class="tab-content" id="myTabContent">
        <!-- 股票查询 -->
        <div class="tab-pane fade show active" id="search" role="tabpanel">
            <div class="row mb-3">
                <div class="col-md-6">
                    <div class="input-group">
                        <input type="text" class="form-control" id="searchKeyword" placeholder="请输入股票代码或名称">
                        <button class="btn btn-primary" type="button" id="searchBtn">搜索</button>
                    </div>
                </div>
            </div>

            <div class="row" id="searchResults">
                <!-- 搜索结果将在这里显示 -->
            </div>
        </div>

        <!-- 分组管理 -->
        <div class="tab-pane fade" id="group" role="tabpanel">
            <div class="row">
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <span>分组列表</span>
                            <button class="btn btn-sm btn-primary" id="addGroupBtn">添加分组</button>
                        </div>
                        <div class="card-body">
                            <div class="list-group" id="groupList">
                                <!-- 分组列表将在这里显示 -->
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">
                            <button class="btn btn-sm btn-primary" id="flushListBut">刷新</button>
                            <button class="btn btn-sm btn-primary" id="flushFlagBut">刷新开关</button>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                    <tr>
                                        <th>代码</th>
                                        <th>名称</th>
                                        <th>价格</th>
                                        <th>涨跌幅</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody id="groupStocksTable">
                                    <!-- 分组股票将在这里显示 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 添加分组模态框 -->
<div class="modal fade" id="addGroupModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加分组</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="groupName" class="form-label">分组名称</label>
                    <input type="text" class="form-control" id="groupName">
                </div>
                <div class="mb-3">
                    <label for="groupDescription" class="form-label">分组描述</label>
                    <textarea class="form-control" id="groupDescription" rows="3"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveGroupBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 编辑分组模态框 -->
<div class="modal fade" id="editGroupModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑分组</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="editGroupId">
                <div class="mb-3">
                    <label for="editGroupName" class="form-label">分组名称</label>
                    <input type="text" class="form-control" id="editGroupName">
                </div>
                <div class="mb-3">
                    <label for="editGroupDescription" class="form-label">分组描述</label>
                    <textarea class="form-control" id="editGroupDescription" rows="3"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="updateGroupBtn">更新</button>
            </div>
        </div>
    </div>
</div>

<!-- 股票详情模态框 -->
<div class="modal fade" id="stockDetailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="stockDetailTitle">股票详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <h6>基本信息</h6>
                        <table class="table table-bordered">
                            <tbody>
                            <tr>
                                <td>代码</td>
                                <td id="detailCode"></td>
                            </tr>
                            <tr>
                                <td>名称</td>
                                <td id="detailName"></td>
                            </tr>
                            <tr>
                                <td>当前价格</td>
                                <td id="detailPrice"></td>
                            </tr>
                            <tr>
                                <td>涨跌幅</td>
                                <td id="detailChange"></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <h6>实时数据</h6>
                        <table class="table table-bordered">
                            <tbody>
                            <tr>
                                <td>开盘价</td>
                                <td id="openPrice">--</td>
                            </tr>
                            <tr>
                                <td>最高价</td>
                                <td id="highPrice">--</td>
                            </tr>
                            <tr>
                                <td>最低价</td>
                                <td id="lowPrice">--</td>
                            </tr>
                            <tr>
                                <td>成交量</td>
                                <td id="volume">--</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="mt-3">
                    <h6>分时线</h6>
                    <div id="timeSeriesChart" style="height: 300px;"></div>
                </div>
                <div class="mt-3">
                    <h6>资金流入情况</h6>
                    <div id="fundFlowChart" style="height: 300px;"></div>
                </div>
                <div class="mt-3">
                    <h6>日线图</h6>
                    <div id="dailyChart" style="height: 300px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Toast 容器 -->
<div class="toast-container" id="toastContainer">
    <!-- Toasts 将通过 JavaScript 动态添加到这里 -->
</div>

<script src="./js/bootstrap.min.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/toast.js"></script>
<script src="./js/search.js"></script>
<script src="./js/group.js"></script>
<script src="./js/group-stocks.js"></script>
<script src="./js/stock-detail.js"></script>
<script src="./js/stock-monitor.js"></script>
</body>
</html>